<template>
  <!-- 切记一定要填写value属性进行绑定才能正常使用表单验证 -->
  <view class="addFeedbackContainer">
    <uni-forms modelValue="feedbackQuestion" labelPosition="top" ref="form" :rules="rules" validateTrigger="bind"
      :value="feedbackQuestion">
      <uni-forms-item label="反馈类别" name="questionType">
        <uni-data-select v-model="feedbackQuestion.questionType" :localdata="range"></uni-data-select>
      </uni-forms-item>
      <uni-forms-item label="快递单号" name="questionNumber">
        <uni-easyinput type="text" primaryColor="#ff84b4" v-model="feedbackQuestion.questionNumber"></uni-easyinput>
      </uni-forms-item>
      <uni-forms-item label="反馈内容" name="questionContent">
        <uni-easyinput type="textarea" v-model="feedbackQuestion.questionContent" primaryColor="#ff84b4"
          placeholder="请输入所反馈的内容" />
      </uni-forms-item>
    </uni-forms>
    <wyb-button class="btn" width="190rpx" type="filled" color="#ff84b4" @click="submitFeedback">提交反馈</wyb-button>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        feedbackQuestion: {
          questionId: '',
          questionType: '',
          questionNumber: '',
          questionContent: '',
          questionIdentify: '',
          createTime: '',
          userId: '',
        },
        range: [{
            value: 1,
            text: '快递丢件'
          },
          {
            value: 2,
            text: '快递错拿'
          },
          {
            value: 3,
            text: '快递未找到'
          },
          {
            value: 4,
            text: '其他问题'
          }
        ],
        rules: {
          questionType: {
            rules: [{
              required: true,
              errorMessage: '请填写反馈类别',
            }, ]
          },
          questionNumber: {
            rules: [{
              required: true,
              errorMessage: '请填写反馈类别',
            }, ]
          },
          questionContent: {
            rules: [{
              required: true,
              errorMessage: '请填写反馈类别',
            }, ]
          }

        }
      }
    },
    methods: {
      // 点击反馈按钮
      submitFeedback(form) {
        console.log(this.feedbackQuestion);
        var _this = this;
        this.$refs.form.validate().then(res => {
          console.log('表单数据信息：', res);
          this.$http.post(('/api/feedbackQuestion/add'),{
              questionType: _this.feedbackQuestion.questionType,
              questionNumber: _this.feedbackQuestion.questionNumber,
              questionContent: _this.feedbackQuestion.questionContent
          }).then((res) => {
            console.log(res);
          })
          uni.showToast({
            title: '反馈成功',
            duration: 2000
          });
          setTimeout(function() {
            uni.navigateBack();
          }, 2000);

        }).catch(err => {
          console.log('表单错误信息：', err);
          uni.showToast({
            title: '提交失败',
            icon: 'none', //如果要纯文本，不要icon，将值设为'none'
            duration: 2000 //持续时间为 2秒
          })
        })

      }
    }
  }
</script>

<style>
  .addFeedbackContainer {
    /*    margin-top: 200rpx; */
    padding: 50rpx;
  }
</style>
